<template>
	<view class="zong">
		<!-- 搜索框 -->
		<view class="shaixuan">
			<view class="sousuokuang">
				<!-- 搜索图标 -->
				<!-- <uni-icons type="search" size="18" color="#999" class='ssousuo'></uni-icons> -->
				<image src="/static/images/shouye/sousuo.svg" class='sousuo' type='widthFix'/>
				<!-- 输入框 -->
				<input class="search-input" v-model="searchText" placeholder="请输入搜索内容" placeholder-style="color:#8F8F8F"  @confirm="handleSearch" />
				<!-- 搜索按钮 -->
				<!-- <view class="search-btn" @click="handleSearch">搜索</view> -->
			</view>
			<view class="fenlei">
				<view class="zuo">
					<scroll-view class="kuang" scroll-x="true">
						<view class="xiang" v-for='(item, index) in fenlei' :key='index' @tap="shaixuan(item.id)">
							<text :class='{zise: item.x}'>{{item.name}}</text><view class='hengxian' v-if='item.x'></view>
						</view>
					</scroll-view>
				</view>
				<view class="you" @tap="shaixuan(0)">
					<text>全部</text>
					<image src="/static/images/shangjialiebiao/quanbu.svg" mode="widthFix" class='quanbu'></image>
				</view>
			</view>
		</view>

		<!-- 排序栏 -->
		<view class="sort-bar">
			<view class="sort-item" v-for="item in sortOptions" :key="item.value" @click="changeSort(item.value)">
				<text :class='{active: sortField === item.value}'>{{ item.label }}</text>
				<view class="sort-arrows">
					<image :class="['jiantou', {xiangshang: sortField === item.value && sortOrder === 'asc'}]" :src="'/static/images/shangjialiebiao/'+(sortField == item.value ? 'xia_zi.svg': 'xia_hui.svg')" mode="widthFix"></image>
					<!-- <text :class="['arrow', {active: sortField === item.value && sortOrder === 'asc'}]">▲</text>
					<text :class="['arrow', {active: sortField === item.value && sortOrder === 'desc'}]">▼</text> -->
				</view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<scroll-view class="result-list" scroll-y @scrolltolower="chudijiazaigengduo">
			<!-- <seele-goodsdetail :data='datobj'></seele-goodsdetail> -->
			<view class="xiang" v-for='(shop, index) in con.data' :key='shop.id' @click="details(shop.id)">
				<image class="touxiang" :src='shop.avatar'></image>
				<text class="shangdianming">{{shop.shopname}}</text>
				<text class="fen">{{Number.isInteger(shop.score) ? shop.score + '.0' : shop.score}}<text style='font-size: 24rpx;'>分<text style="color: #999;margin-left: 10rpx;">销量{{shop.monthly_sales_order}}</text></text></text>
				<text class="juli">{{shop.distance}}km</text>
				<view class="shangpinkuang">
					<view class="shangpin" v-for='(good, index) in shop.goods' :key='index'>
						<image class="tu" :src='good.image'></image>
						<text class="shangpinming">{{good.title}}</text>
						<text class="jiage">￥{{good.price}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	let header, that, method = 'post'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				con:{
					
				},
				fenlei: [],
				datobj: {},
				scanner: '',
				pages: 1,
				longitude: '', //经度
				latitude: '', //维度
				month_order: null, //月销
				score_order: null, // 评分
				distance_order: null, // 距离
				per_order: null, // 人均
				searchText: '',
				sortField: 'score', // 当前排序字段
				sortOrder: 'desc', // 当前排序顺序
				sortOptions: [
					{label: '综合排序',value: 'score'},
					{label: '分类',value: 'fenlei'},
					{label: '速度',value: 'distance'}
				],
				resultList: [
					// 模拟数据
					{
						image: '/static/logo.png',
						description: '示例内容1',
						rating: 4.8,
						distance: 1.2
					}
				]
			}
		},
		computed: {
			...mapState(['seele']),
			sortedList() {
				return [...this.resultList].sort((a, b) => {
					let valueA, valueB
					switch (this.sortField) {
						case 'rating':
							valueA = a.rating
							valueB = b.rating
							break
						case 'distance':
							valueA = a.distance
							valueB = b.distance
							break
						default:
							return 0 // 推荐排序保持原始顺序
					}

					if (this.sortOrder === 'asc') {
						return valueA - valueB
					} else {
						return valueB - valueA
					}
				})
			}
		},
		onLoad(e = {}) {
			that = this
			// console.log(this.$store.state, 'gggcs');
			// header = {token: this.$store.state.user.token}
			header = {token: '25e41bfd-5990-47f6-9996-9e44e78f6abd'}
			that.init(e)
			//this.$store.dispatch('seele/loadNearList', {});
		},
		created() {
			
		},
		methods: {
			details(id){
				uni.navigateTo({
					url:'/pages/sc/shaopIndex/shaopIndex?id='+id
				})
			},
			chudijiazaigengduo(){
				if(that.con.current_page * that.con.per_page < that.con.total){
					that.chaxun({page: that.con.current_page + 1})
				}
			},
			shaixuan(id){
				let fenlei = that.fenlei
				fenlei.forEach(item => {
					item.x = 0
					if(item.id == id) item.x = 1
				})
				that.fenlei = fenlei
				that.chaxun()
			},
			handleSearch() {
				// 这里实际应调用搜索接口
				let keyword = this.searchText.trim()
				this.chaxun({keyword})
				// this.$store.commit("seele/setNearListKeywords", this.searchText)
				// this.$store.dispatch("seele/loadNearList", {})
			},
			changeSort(field) {
				if(field == 'fenlei') return
				if (this.sortField === field) {
					// 切换排序顺序
					this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
				} else {
					// 切换排序字段并重置为降序
					this.sortField = field
					this.sortOrder = 'desc'
				}
				that.chaxun()
			},
			init(e = {}) {
				uni.request({url: 'https://www.lichu2025.cn/api/chef/index/cate_list',method,header,
					success(res){
						if(res.res.code === 1){
							let fenlei = res.data, tmp = [{id: 0, name: '精选', x:1}]
							fenlei.forEach(item => {item.x = 0})
							fenlei = [{id: 0, name: '精选', x: 1}, ...fenlei]
							that.fenlei = fenlei
							if(e.keyword) that.searchText = e.keyword.trim()
							if(e.category_id){
								fenlei.forEach(item => {
									item.x = 0
									if(item.id == e.category_id) item.x = 1
								})
								that.fenlei = fenlei
							}
							that.chaxun()
						}
					}
				})
			},
			chaxun(e = {}){
				let data = {page: 1}, url = 'https://www.lichu2025.cn/api/chef/index/store_list', fenlei = that.fenlei
				Object.keys(e).forEach(k=>{
					if(['lat', 'lng', 'keyword', 'category_id', 'order', 'sort', 'page'].indexOf(k) > -1){
						k == 'keyword' ? data[k] = e[k].trim() : data[k] = e[k];
					}
				})
				if(data['order'] == 'distance'){
					if(data['sort'] == 'asc'){
						data['sort'] = 'desc';
					}else{
						data['sort'] = 'asc';
					}
				}
				data['keyword'] = that.searchText.trim()
				fenlei.forEach(item => {
					if(item.x == 1)
					data['category_id'] = item.id
				})
				console.log(data, '查询参数')
				data.order = this.sortField
				data.sort = this.sortOrder
				uni.showLoading({
					title: 'Loading...'
				})
				if(!data.lng || !data.lat){
					uni.getLocation({
						type: 'wgs84',
						success(res) {
							uni.setStorageSync('latitude', res.latitude);
							uni.setStorageSync('longitude', res.longitude);
							data.lat = String(res.latitude);
							data.lng = String(res.longitude);
							uni.request({url,header,data,method, 
								success(res){
									if(res.res.code === 1){
										console.log(res.data)
										if(res.data.current_page == 1){
											that.con = res.data
										}else{
											that.con.current_page = res.data.current_page
											that.con.data = [...that.con.data, ...res.data.data]
										}
									}
								},
								fail(err){console.error('请求失败：', err);},
								complete(res){uni.hideLoading()}
							});
						},
						fail(err){console.error('获取位置失败：', err);}
					});
				}else{
					uni.request({url,header,data,method,
						success(res){
							if(res.res.code === 1){
								console.log(res.data)
								if(res.data.current_page == 1){
									that.con = res.data
								}else{
									that.con.current_page = res.data.current_page
									that.con.data = [...that.con.data, ...res.data.data]
								}
							}
						},
						fail(err){console.error('请求失败：', err);},
						complete(){uni.hideLoading()}
					});
				}
			}
		},

	}
</script>
<style lang="scss" scoped>
	.zong {
		font-family: HarmonyOS Sans SC;
		background: #EEFCEB;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		.shaixuan {
			background: #fff;
			padding: 20rpx 0;
			padding-bottom: 0;
			height: 190rpx;
			position: fixed;
			top: 0;
			.sousuokuang {
				position: relative;
				margin-left: 30rpx;
				width: 690rpx;
				height: 70rpx;
				background: #EFF0F2;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 0 10rpx 0 23rpx;
				.sousuo{
					width: 35rpx;
					height: 35rpx;
				}
				.search-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 23rpx;
				}
				.search-input {
					flex: 1;
					height: 100%;
					font-size: 24rpx;
					color: #333;
					padding-left: 10rpx;
				}
			}
			.fenlei{
				width: 750rpx;
				height: 66rpx;
				margin-top: 35rpx;
				overflow: hidden;
				overflow-x: scroll;
				.zuo{
					width: 630rpx;
					position: relative;
					float: left;
					.kuang{
						position: relative;
						height: 66rpx;
						white-space: nowrap;
						width: 100%;
						.xiang{
							display: inline-block;
							width: 58rpx;
							height: 66rpx;
							margin-left: 60rpx;
							position: relative;
							&:nth-child(1){
								margin-left: 30rpx;	
							}
							&:last-child{
								margin-right: 30rpx;
							}
							text{
								font-size: 30rpx;
								font-weight: 500;
							}
							.hengxian{
								background: #84BD00;
								width: 58rpx;
								height: 6rpx;
								bottom: 0;
								position: absolute;
							}
							.zise{
								color: #84BD00;
							}
						}
					}
				}
				.you{
					widht: 120rpx;
					font-size: 30rpx;
					color: #CECECE;
					float: left;
					padding-left: 20rpx;
					text{
						display: block;
						float: left;
					}
					.quanbu{
						margin-top: 7rpx;
						margin-left: 10rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
		.paixu{
			
		}
	}
	.search-btn {
		padding: 20rpx 36rpx;
		border-radius: 25px;
		font-size: 28rpx;
		color: white;
		background-color: #FB4C2D;
		line-height: 1;
	}
	.sort-bar {
		background: #EEFCEB;
		height: 120rpx;
		font-size: 30rpx;
		position: fixed;
		top: 190rpx;
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		.sort-item {
			display: flex;
			align-items: center;
			padding: 40rpx 30rpx;
			.sort-arrows {
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				.jiantou{
					width: 20rpx;
					height: 20rpx;
				}
				.xiangshang{
					transform: rotate(180deg);
				}
				.arrow {
					font-size: 20rpx;
					color: #ccc;
					line-height: 0.8;
				}
				.arrow.active {
					color: #84BD00;
				}
			}
			.active {
				color: #84BD00;
			}
		}
	}
	.result-list {
		margin-top: 310rpx;
		height: calc(100vh - 310rpx);
		padding-bottom: 30rpx;
		.xiang{
			margin-left: 30rpx;
			margin-bottom: 30rpx;
			width: 690rpx;
			height: 439rpx;
			position: relative;
			background: #fff;
			border-radius: 16rpx;
			>view, >image, >text{
				position: absolute;
			}
			.touxiang{
				border-radius: 10rpx;
				width: 107rpx;
				height: 107rpx;
				top: 26rpx;
				left: 24rpx;
			}
			.shangdianming{
				width: 420rpx;
				height: 35rpx;
				font-size: 30rpx;
				top: 38rpx;
				left: 155rpx;
				overflow: hidden;
			}
			.fen{
				top: 81rpx;
				left: 155rpx;
				font-size: 28rpx;
				color: #DD7329;
			}
			.juli{
				top: 83rpx;
				right: 24rpx;
				font-size: 24rpx;
				color: #999;
			}
			.shangpinkuang{
				top: 160rpx;
				left: 157rpx;
				width: 533rpx;
				.shangpin{
					float: left;
					margin-left: 16rpx;
					width: 161rpx;
					height: 252rpx;
					position: relative;
					>image, >text{
						position: absolute;
						left: 0;
					}
					.tu{
						width: 159rpx;
						height: 159rpx;
						top: 0;
						border-radius: 10rpx;
					}
					.shangpinming{
						width: 159rpx;
						height: 30rpx;
						font-size: 24rpx;
						overflow: hidden;
						top: 179rpx;
					}
					.jiage{
						width: 101rpx;
						height: 30rpx;
						font-size: 30rpx;
						top: 222rpx;
						color: #DD7329;
					}
				}
			}
		}
	}
</style>